﻿
@{
    ViewBag.Title = "收件箱";
}

@section Style{
    @Styles.Render("~/Content/Flat/Css/Inbox")
}

@section Script{
    @Scripts.Render("~/Content/Flat/Js/inbox")
}
<!--main content start-->
<section id="main-content">
    <section class="wrapper">
        <!--mail inbox start-->
        <div class="mail-box">
            <aside class="sm-side">
                <div class="user-head">
                    <a href="javascript:;" class="inbox-avatar">
                        <img src="/Content/Flat/img/mail-avatar.jpg" alt="">
                    </a>
                    <div class="user-name">
                        <h5><a href="#">史密斯</a></h5>
                        <span><a href="#">service@jucheap.com</a></span>
                    </div>
                    <a href="javascript:;" class="mail-dropdown pull-right">
                        <i class="fa fa-chevron-down"></i>
                    </a>
                </div>
                <div class="inbox-body">
                    <a class="btn btn-compose" data-toggle="modal" href="#myModal">
                        Compose
                    </a>
                    <!-- Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title">Compose</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form-horizontal" role="form">
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">收件人</label>
                                            <div class="col-lg-10">
                                                <input type="text" class="form-control" id="inputEmail1" placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">抄送</label>
                                            <div class="col-lg-10">
                                                <input type="text" class="form-control" id="cc" placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">主题</label>
                                            <div class="col-lg-10">
                                                <input type="text" class="form-control" id="inputPassword1" placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">内容</label>
                                            <div class="col-lg-10">
                                                <textarea name="" id="" class="form-control" cols="30" rows="10"></textarea>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-lg-offset-2 col-lg-10">
                                                <span class="btn green fileinput-button">
                                                    <i class="fa fa-plus fa fa-white"></i>
                                                    <span>附件</span>
                                                    <input type="file" multiple="" name="files[]">
                                                </span>
                                                <button type="submit" class="btn btn-send">发送</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->
                </div>
                <ul class="inbox-nav inbox-divider">
                    <li class="active">
                        <a href="#"><i class="fa fa-inbox"></i> Inbox <span class="label label-danger pull-right">2</span></a>

                    </li>
                    <li>
                        <a href="#"><i class="fa fa-envelope-o"></i> 发送邮件</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-bookmark-o"></i> 重要邮件</a>
                    </li>
                    <li>
                        <a href="#"><i class=" fa fa-external-link"></i> 草稿 <span class="label label-info pull-right">30</span></a>
                    </li>
                    <li>
                        <a href="#"><i class=" fa fa-trash-o"></i> 垃圾邮件</a>
                    </li>
                </ul>
                <ul class="nav nav-pills nav-stacked labels-info inbox-divider">
                    <li> <h4>Labels</h4> </li>
                    <li> <a href="#"> <i class=" fa fa-sign-blank text-danger"></i> 工作 </a> </li>
                    <li> <a href="#"> <i class=" fa fa-sign-blank text-success"></i> 设计 </a> </li>
                    <li> <a href="#"> <i class=" fa fa-sign-blank text-info "></i> 家人 </a>
                    <li> <a href="#"> <i class=" fa fa-sign-blank text-warning "></i> 朋友 </a>
                    <li>
                        <a href="#"> <i class=" fa fa-sign-blank text-primary "></i> 办公 </a>
                    </li>
                </ul>
                <ul class="nav nav-pills nav-stacked labels-info ">
                    <li> <h4>Buddy online</h4> </li>
                    <li> <a href="#"> <i class=" fa fa-circle text-success"></i> 乔恩 <p>I do not think</p></a>  </li>
                    <li> <a href="#"> <i class=" fa fa-circle text-danger"></i> 山姆 <p>Busy with coding</p></a> </li>
                    <li> <a href="#"> <i class=" fa fa-circle text-muted "></i> 俏丽 <p>I out of control</p></a>
                    <li> <a href="#"> <i class=" fa fa-circle text-muted "></i> 史密斯 <p>I am not here</p></a>
                    <li>
                        <a href="#"> <i class=" fa fa-circle text-muted "></i> 塔夫卡 <p>I do not think</p></a>
                    </li>
                </ul>

                <div class="inbox-body text-center">
                    <div class="btn-group">
                        <a href="javascript:;" class="btn mini btn-primary">
                            <i class="fa fa-plus"></i>
                        </a>
                    </div>
                    <div class="btn-group">
                        <a href="javascript:;" class="btn mini btn-success">
                            <i class="fa fa-phone"></i>
                        </a>
                    </div>
                    <div class="btn-group">
                        <a href="javascript:;" class="btn mini btn-info">
                            <i class="fa fa-cog"></i>
                        </a>
                    </div>
                </div>

            </aside>
            <aside class="lg-side">
                <div class="inbox-head">
                    <h3>Inbox</h3>
                    <form class="pull-right position" action="#">
                        <div class="input-append">
                            <input type="text" placeholder="Search Mail" class="sr-input">
                            <button type="button" class="btn sr-btn"><i class="fa fa-search"></i></button>
                        </div>
                    </form>
                </div>
                <div class="inbox-body">
                    <div class="mail-option">
                        <div class="chk-all">
                            <input type="checkbox" class="mail-checkbox mail-group-checkbox">
                            <div class="btn-group">
                                <a class="btn mini all" href="#" data-toggle="dropdown">
                                    所有
                                    <i class="fa fa-angle-down "></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#"> 无</a></li>
                                    <li><a href="#"> 已读</a></li>
                                    <li><a href="#"> 未读</a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="btn-group">
                            <a class="btn mini tooltips" href="#" data-toggle="dropdown" data-placement="top" data-original-title="Refresh">
                                <i class=" fa fa-refresh"></i>
                            </a>
                        </div>
                        <div class="btn-group hidden-phone">
                            <a class="btn mini blue" href="#" data-toggle="dropdown">
                                更多
                                <i class="fa fa-angle-down "></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><i class="fa fa-pencil"></i> 标记为已读</a></li>
                                <li><a href="#"><i class="fa fa-ban"></i> 垃圾邮件</a></li>
                                <li class="divider"></li>
                                <li><a href="#"><i class="fa fa-trash-o"></i> 已删除</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <a class="btn mini blue" href="#" data-toggle="dropdown">
                                移动到
                                <i class="fa fa-angle-down "></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><i class="fa fa-pencil"></i> 已读</a></li>
                                <li><a href="#"><i class="fa fa-ban"></i> 垃圾箱</a></li>
                                <li class="divider"></li>
                                <li><a href="#"><i class="fa fa-trash-o"></i> 删除</a></li>
                            </ul>
                        </div>

                        <ul class="unstyled inbox-pagination">
                            <li><span>1-50 of 234</span></li>
                            <li>
                                <a href="#" class="np-btn"><i class="fa fa-angle-left  pagination-left"></i></a>
                            </li>
                            <li>
                                <a href="#" class="np-btn"><i class="fa fa-angle-right pagination-right"></i></a>
                            </li>
                        </ul>
                    </div>
                    <table class="table table-inbox table-hover">
                        <tbody>
                            <tr class="unread">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star"></i></td>
                                <td class="view-message  dont-show">Vector Lab</td>
                                <td class="view-message ">Lorem ipsum dolor imit set.</td>
                                <td class="view-message  inbox-small-cells"><i class="fa fa-paperclip"></i></td>
                                <td class="view-message  text-right">9:27 AM</td>
                            </tr>
                            <tr class="unread">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star"></i></td>
                                <td class="view-message dont-show">Mosaddek Hossain</td>
                                <td class="view-message">Hi Bro, How are you?</td>
                                <td class="view-message inbox-small-cells"></td>
                                <td class="view-message text-right">March 15</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star"></i></td>
                                <td class="view-message dont-show">Dulal khan</td>
                                <td class="view-message">Lorem ipsum dolor sit amet</td>
                                <td class="view-message inbox-small-cells"></td>
                                <td class="view-message text-right">June 15</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star"></i></td>
                                <td class="view-message dont-show">Facebook</td>
                                <td class="view-message">Dolor sit amet, consectetuer adipiscing</td>
                                <td class="view-message inbox-small-cells"></td>
                                <td class="view-message text-right">April 01</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star inbox-started"></i></td>
                                <td class="view-message dont-show">Mosaddek <span class="label label-danger pull-right">urgent</span></td>
                                <td class="view-message">Lorem ipsum dolor sit amet</td>
                                <td class="view-message inbox-small-cells"></td>
                                <td class="view-message text-right">May 23</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star inbox-started"></i></td>
                                <td class="view-message dont-show">Facebook</td>
                                <td class="view-message">Dolor sit amet, consectetuer adipiscing</td>
                                <td class="view-message inbox-small-cells"><i class="fa fa-paperclip"></i></td>
                                <td class="view-message text-right">March 14</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star inbox-started"></i></td>
                                <td class="view-message dont-show">Rafiq</td>
                                <td class="view-message">Lorem ipsum dolor sit amet</td>
                                <td class="view-message inbox-small-cells"><i class="fa fa-paperclip"></i></td>
                                <td class="view-message text-right">January 19</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star"></i></td>
                                <td class="view-message dont-show">Facebook <span class="label label-success pull-right">megazine</span></td>
                                <td class="view-message view-message">Dolor sit amet, consectetuer adipiscing</td>
                                <td class="view-message inbox-small-cells"></td>
                                <td class="view-message text-right">March 04</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star"></i></td>
                                <td class="view-message dont-show">Mosaddek</td>
                                <td class="view-message view-message">Lorem ipsum dolor sit amet</td>
                                <td class="view-message inbox-small-cells"></td>
                                <td class="view-message text-right">June 13</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star"></i></td>
                                <td class="view-message dont-show">Facebook <span class="label label-info pull-right">family</span></td>
                                <td class="view-message view-message">Dolor sit amet, consectetuer adipiscing</td>
                                <td class="view-message inbox-small-cells"></td>
                                <td class="view-message text-right">March 24</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star inbox-started"></i></td>
                                <td class="view-message dont-show">Mosaddek</td>
                                <td class="view-message">Lorem ipsum dolor sit amet</td>
                                <td class="view-message inbox-small-cells"></td>
                                <td class="view-message text-right">March 09</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star inbox-started"></i></td>
                                <td class="dont-show">Facebook</td>
                                <td class="view-message">Dolor sit amet, consectetuer adipiscing</td>
                                <td class="view-message inbox-small-cells"><i class="fa fa-paperclip"></i></td>
                                <td class="view-message text-right">May 14</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star"></i></td>
                                <td class="view-message dont-show">Sumon</td>
                                <td class="view-message">Lorem ipsum dolor sit amet</td>
                                <td class="view-message inbox-small-cells"><i class="fa fa-paperclip"></i></td>
                                <td class="view-message text-right">February 25</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star"></i></td>
                                <td class="dont-show">Facebook</td>
                                <td class="view-message view-message">Dolor sit amet, consectetuer adipiscing</td>
                                <td class="view-message inbox-small-cells"></td>
                                <td class="view-message text-right">March 14</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star"></i></td>
                                <td class="view-message dont-show">Dulal</td>
                                <td class="view-message">Lorem ipsum dolor sit amet</td>
                                <td class="view-message inbox-small-cells"></td>
                                <td class="view-message text-right">April 07</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star"></i></td>
                                <td class="view-message dont-show">Twitter</td>
                                <td class="view-message">Dolor sit amet, consectetuer adipiscing</td>
                                <td class="view-message inbox-small-cells"></td>
                                <td class="view-message text-right">July 14</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star inbox-started"></i></td>
                                <td class="view-message dont-show">Sumon</td>
                                <td class="view-message">Lorem ipsum dolor sit amet</td>
                                <td class="view-message inbox-small-cells"></td>
                                <td class="view-message text-right">August 10</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star"></i></td>
                                <td class="view-message dont-show">Facebook</td>
                                <td class="view-message view-message">Dolor sit amet, consectetuer adipiscing</td>
                                <td class="view-message inbox-small-cells"><i class="fa fa-paperclip"></i></td>
                                <td class="view-message text-right">April 14</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star"></i></td>
                                <td class="view-message dont-show">Mosaddek</td>
                                <td class="view-message">Lorem ipsum dolor sit amet</td>
                                <td class="view-message inbox-small-cells"><i class="fa fa-paperclip"></i></td>
                                <td class="view-message text-right">June 16</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star inbox-started"></i></td>
                                <td class="view-message dont-show">Sumon</td>
                                <td class="view-message">Lorem ipsum dolor sit amet</td>
                                <td class="view-message inbox-small-cells"></td>
                                <td class="view-message text-right">August 10</td>
                            </tr>
                            <tr class="">
                                <td class="inbox-small-cells">
                                    <input type="checkbox" class="mail-checkbox">
                                </td>
                                <td class="inbox-small-cells"><i class="fa fa-star"></i></td>
                                <td class="view-message dont-show">Facebook</td>
                                <td class="view-message view-message">Dolor sit amet, consectetuer adipiscing</td>
                                <td class="view-message inbox-small-cells"><i class="fa fa-paperclip"></i></td>
                                <td class="view-message text-right">April 14</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </aside>
        </div>
        <!--mail inbox end-->
    </section>
</section>
<!--main content end-->